import React, { Component } from "react";
import { Modal, Checkbox, message } from "antd";

import "./popup.less";

export default class ReceiptPopup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    };
  }

  handleOk = () => {
    const { checked } = this.state;
    const { onOk } = this.props;
    if (checked) {
      onOk();
    } else {
      message.destroy();
      message.error("请先进行确认");
    }
  };
  render() {
    const { totalPrice, onCancel, type, radomNum } = this.props;
    const { checked } = this.state;
    const title = type === "pay" ? "确认付款" : "确认收款";
    const text =
      type === "pay"
        ? "您确认已向卖家支付订单金额"
        : "您确认您已收到对方支付的";
    const checkedText = type === "pay" ? "我已确认付款" : "我已确认收款";

    return (
      <Modal
        title={title}
        wrapClassName="v-center-modal"
        width={400}
        cancelText={"取消"}
        okText={"确认"}
        centered
        visible={true}
        onCancel={onCancel}
        onOk={this.handleOk}
      >
        <div className="confirmReceipt">
          <p>
            {text}
            <span className="moneySpan">{totalPrice}</span>
            {"元"} <br />
          </p>
          <div>
            <div>
              <Checkbox
                checked={checked}
                onChange={e => {
                  this.setState({ checked: e.target.checked });
                }}
              >
                {checkedText}
              </Checkbox>
            </div>
          </div>
        </div>
      </Modal>
    );
  }
}
